<template>
  <div class="bg-white p-4">
    <div class="flex items-center space-x-1 mb-4">
      <a-input type="text" style="width: 140px;" placeholder="输入房间名" class="border p-1" />
      <a-select class="border p-1" style="width: 120px;" placeholder="房型">
        <a-select-option value="全部房型">全部房型</a-select-option>
      </a-select>
      <a-select class="border p-1" style="width: 120px;" placeholder="状态">
        <a-select-option value="全部状态">全部状态</a-select-option>
      </a-select>
      <span class="text-black">技师全下钟客人未买单提醒</span>
      <a-input style="width: 60px;" value=""></a-input>分钟后
      <label class="flex items-center">
        <a-checkbox>显示金额</a-checkbox>
        <!-- <input type="checkbox" class="mr-2"> 显示金额 -->
      </label>
      <label class="flex items-center">
        <a-checkbox>开启语音播报</a-checkbox>
        <!-- <input type="checkbox" class="mr-2" checked> 开启语音播报 -->
      </label>
      <!-- <button class="text-blue-500">显示金额</button> -->
      <a-checkbox>显示金额</a-checkbox>
      <span class="text-black">在场4人 未结账金额: 1136</span>
      <a-button type="primary">查看延时排钟</a-button>
    </div>
    <draggable v-model="roomList" style="display: flex;flex-wrap: wrap;" group="people" @start="drag = true"
      @end="drag = false" item-key="id">
      <template #item="{ element, index }">
        <a-col class="warpbox" :span="2" :style="{ 'background': element.color }">
          <p>{{ element.roomNumber }}</p>
          <p>{{ element.item }}</p>
          <p></p>
          <p></p>
        </a-col>
      </template>
    </draggable>
  </div>

  <div class="bg-white p-4">
    <div class="flex items-center space-x-4 mb-4">
      <div class="flex items-center space-x-1">
        <span>请假: </span>
        <span class="colorbox" style="background: rgb(254,152,0);"></span>
      </div>
      <div class="flex items-center space-x-1">
        <span>未上班: </span>
        <span class="colorbox" style="background: rgb(143,143,143);"></span>
      </div>
      <div class="flex items-center space-x-1">
        <span>圈牌: </span>
        <span class="colorbox" style="background: rgb(254,152,0);"></span>
      </div>
      <div class="flex items-center space-x-1">
        <span>预约: </span>
        <span class="colorbox" style="background: rgb(143,143,143);"></span>
      </div>
      <div class="flex items-center space-x-1">
        <span>点,call: </span>
        <span class="colorbox" style="background: rgb(254,152,0);"></span>
      </div>
      <div class="flex items-center space-x-1">
        <span>服务中: </span>
        <span class="colorbox" style="background: rgb(143,143,143);"></span>
      </div>
      <div class="flex items-center space-x-1">
        <span>加班: </span>
        <span class="colorbox" style="background: rgb(254,152,0);"></span>
      </div>
      <div class="flex items-center space-x-1">
        <span>上钟超时: </span>
        <span class="colorbox" style="background: rgb(143,143,143);"></span>
      </div>
      <div class="flex items-center space-x-1">
        <span>下钟超时: </span>
        <span class="colorbox" style="background: rgb(254,152,0);"></span>
      </div>
    </div>

    <div class="flex items-center space-x-2 mb-4">
      <a-input-number style="width:130px" type="text" placeholder="输入技师号" />
      <a-select placeholder="钟序顺序">
        <a-select-option>钟序顺序</a-select-option>
      </a-select>
      <a-select placeholder="全部工种">
        <a-select-option>钟序顺序</a-select-option>
      </a-select>
      <label class="flex items-center">
        <a-checkbox>显示未上班技师</a-checkbox>
      </label>
      <label class="flex items-center">
        <a-checkbox>分开显示</a-checkbox>
      </label>
      <div>全部技师 28人</div>
      <div>空闲技师 1人</div>
      <div>未上班技师 21人</div>
      <div>上钟技师 4人</div>
      <div>上钟超时 <a-input-number style="width:130px" type="text" placeholder="分钟数" /></div>
      <div>下钟超时 <a-input-number style="width:130px" type="text" placeholder="分钟数" /></div>
    </div>

    <div class="flex items-center space-x-2 mb-4">
      批量圈牌
      <a-select class="border p-1" style="width: 120px;" placeholder="请选择">
      </a-select>
      <a-button type="primary">确定</a-button>
      <a-button danger>取消圈牌</a-button>
    </div>
    <draggable v-model="technician" style="display: flex;flex-wrap: wrap;" group="technician" @start="drag = true"
      @end="drag = false" item-key="id">
      <template #item="{ element, index }">
        <a-col class="warpbox" :span="2">
          <p>{{ element.id }}</p>
          <p>{{ element.category }}</p>
          <p>{{ element.status }}</p>
        </a-col>
      </template>
    </draggable>
  </div>
</template>
<script setup name="homeIndex">
import draggable from 'vuedraggable'
const roomList = ref([])
// 0 空闲 1 等待技师 2 服务中 3 客人休息 4 脏房 5 有预约 6 维修
roomList.value = [
  {
    roomNumber: 222,
    totalPrice: 1136,
    state: 1,
    timer: 1221,
    userList: [22, 55, 23, 26],
    item: '',
    color: '#88ae93'
  },
  {
    roomNumber: 333,
    totalPrice: 0,
    state: 3,
    timer: 1221,
    userList: [],
    item: '',
    color: '#fe8200'
  },
  {
    roomNumber: 666,
    totalPrice: 0,
    state: 5,
    timer: 0,
    userList: [],
    item: '',
    color: '#858121'
  },
  {
    roomNumber: 805,
    totalPrice: 0,
    state: 0,
    timer: 0,
    userList: [],
    item: '按摩与卫浴',
    color: '#fff'
  },
  {
    roomNumber: 806,
    totalPrice: 0,
    state: 0,
    timer: 0,
    userList: [],
    item: '按摩与卫浴',
    color: '#fff'
  },
  {
    roomNumber: 807,
    totalPrice: 0,
    state: 0,
    timer: 0,
    userList: [],
    item: '按摩与卫浴',
    color: '#fff'
  },
  {
    roomNumber: 808,
    totalPrice: 0,
    state: 0,
    timer: 0,
    userList: [],
    item: '按摩与卫浴',
    color: '#fff'
  },
  {
    roomNumber: 809,
    totalPrice: 0,
    state: 0,
    timer: 0,
    userList: [],
    item: '按摩与卫浴',
    color: '#fff'
  },
  {
    roomNumber: 810,
    totalPrice: 0,
    state: 0,
    timer: 0,
    userList: [],
    item: '按摩与卫浴',
    color: '#fff'
  },
  {
    roomNumber: 811,
    totalPrice: 0,
    state: 0,
    timer: 0,
    userList: [],
    item: '按摩与卫浴',
    color: '#fff'
  },
  {
    roomNumber: 812,
    totalPrice: 0,
    state: 0,
    timer: 0,
    userList: [],
    item: '按摩与卫浴',
    color: '#fff'
  },
  {
    roomNumber: 805,
    totalPrice: 0,
    state: 0,
    timer: 0,
    userList: [],
    item: '按摩与卫浴',
    color: '#fff'
  },
  {
    roomNumber: 805,
    totalPrice: 0,
    state: 0,
    timer: 0,
    userList: [],
    item: '按摩与卫浴',
    color: '#fff'
  },
  {
    roomNumber: 805,
    totalPrice: 0,
    state: 0,
    timer: 0,
    userList: [],
    item: '按摩与卫浴',
    color: '#fff'
  },
  {
    roomNumber: 805,
    totalPrice: 0,
    state: 0,
    timer: 0,
    userList: [],
    item: '按摩与卫浴',
    color: '#fff'
  },
  {
    roomNumber: 805,
    totalPrice: 0,
    state: 0,
    timer: 0,
    userList: [],
    item: '按摩与卫浴',
    color: '#fff'
  },
  {
    roomNumber: 805,
    totalPrice: 0,
    state: 0,
    timer: 0,
    userList: [],
    item: '按摩与卫浴',
    color: '#fff'
  },
  {
    roomNumber: 805,
    totalPrice: 0,
    state: 0,
    timer: 0,
    userList: [],
    item: '按摩与卫浴',
    color: '#fff'
  },
  {
    roomNumber: 805,
    totalPrice: 0,
    state: 0,
    timer: 0,
    userList: [],
    item: '按摩与卫浴',
    color: '#fff'
  },
]
const technician = ref(
  [
    {
      "id": 2,
      "category": "女足疗早班",
      "status": "未上班"
    },
    {
      "id": 99,
      "category": "女足疗早班",
      "status": "圈牌中",
      "time": "10/07 15:18"
    },
    {
      "id": 23,
      "category": "女足疗早班",
      "status": "(排)未到达 -1230"
    },
    {
      "id": 55,
      "category": "女足疗早班",
      "status": "(排)未到达 -1230"
    },
    {
      "id": 26,
      "category": "女足疗早班",
      "status": "(排)未到达 -1221"
    },
    {
      "id": 110,
      "category": "女通",
      "status": "未上班"
    },
    {
      "id": 77,
      "category": "女足疗晚班",
      "status": "未上班"
    },
    {
      "id": 17,
      "category": "男足疗晚班",
      "status": "未上班"
    },
    {
      "id": 28,
      "category": "女足疗晚班",
      "status": "未上班"
    },
    {
      "id": 22,
      "category": "女足疗晚班",
      "status": "(排)未到达 -12534"
    },
    {
      "id": 177,
      "category": "女临偷早班",
      "status": "未上班"
    },
    {
      "id": 188,
      "category": "女临偷早班",
      "status": "未上班"
    },
    {
      "id": 166,
      "category": "女临偷早班",
      "status": "未上班"
    },
    {
      "id": 520,
      "category": "女临偷晚班",
      "status": "未上班"
    },
    {
      "id": 999,
      "category": "女临偷晚班",
      "status": "未上班"
    },
    {
      "id": 222,
      "category": "女临偷晚班",
      "status": "未上班"
    },
    {
      "id": 111,
      "category": "女临偷晚班",
      "status": "未上班"
    },
    {
      "id": 666,
      "category": "女临偷晚班",
      "status": "未上班"
    },
    {
      "id": 98,
      "category": "女",
      "status": "未上班"
    },
    {
      "id": 102,
      "category": "女",
      "status": "未上班"
    },
    {
      "id": 838,
      "category": "女",
      "status": "未上班"
    },
    {
      "id": 9999,
      "category": "女"
    },
    {
      "id": 222,
      "category": "女临偷晚班",
      "status": "未上班"
    },
    {
      "id": 19,
      "category": "女足疗晚班",
      "status": "圈牌中",
      "time": "10/07 20:24"
    }
  ]
)
</script>
<style>
.warpbox {
  margin-right: 4px;
  margin-bottom: 4px;
  cursor: pointer;
  border-radius: 4px;
  padding: 4px;
  box-shadow: 4px 4px 4px #d0d0d0;
}

.colorbox {
  display: inline-block;
  width: 8px;
  height: 8px;
}
</style>